<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <input type="button" value="修改name" @click="changeName">
        <book :name="name" author="罗贯中"></book>        
    </div>
</body>
</html>

<script src="./js/vue.global.js"></script>

<script>    

    const {createApp,ref,computed} = Vue;


    // 定义一个组件：
    let book = {
        template:`
            <h1>书籍信息：</h1>
            <p>书名:{{name}}</p>
            <p>书名:{{msg}}</p>
            <p>作者:{{author}}</p>
        `,        
        props:["name","author"],
        setup(props){                 
            // setup函数的第一个参数就是该组件的属性（所有属性），属性是响应式的。
            console.log("book组件setup函数的props参数",props.name,props.author);         
            
        }
    }

    let app = createApp({
        setup(){
            let name = ref("三国演义");
            function changeName(){
                name.value += "1";
            }
            return {
                name,changeName
            }
        },
        components:{
            book
        }   
    })

    

    app.mount("#app");



</script>